<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Canvas</title>
    <style>
        .actions {
            text-align: center;
        }
        .actions button {
            margin: 5px;
        }
        .container {
            width: 1100px;
            min-height: 600px;
            margin: 0 auto;
            background: aliceblue;
        }
        .container > div {
            float: left;
        }
        .container .tracer {
            height: 550px;
            width: 540px;
            background: beige;
        }
    </style>
</head>
<body>
    <div class="actions">
        <button id="ch-opacity">opacity 0.5</button>
        <button id="ch-svg">svg color</button>
    </div>
    <div class="container">
        <!-- <canvas id="canvas" width="550" height="550"></canvas> -->
        <div class="svg"></div>
        <div class="tracer">
            这里是 div 容器
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/svg.js/2.6.4/svg.js"></script>
    <script>
        $(() => {
            var $tracer =$('.tracer')
            var $svg = $('.svg').get(0)
            var draw = SVG($svg)
            $('#ch-opacity').on('click', function(e) {
                $tracer.css('opacity', 0.5)
            })

            $('#ch-svg').on('click', function(e) {
                draw.rect(100, 100).move(100, 50).fill('#0f0')
            })

            
            draw.rect(100, 100).move(100, 50).fill('#f06')


        })
    </script>
</body>
</html>